<script setup>
import { ref, computed } from 'vue'
import { searchDishAPI } from '@/api/search'

// 菜品数据
const dishData = ref([])
const loading = ref(false)

// 选中的菜品
const selectedDishA = ref(null)
const selectedDishB = ref(null)

// 显示菜品选择弹窗
const showDishSelector = ref(false)
const selectingFor = ref('A') // 'A' 或 'B'

const hasMore = ref(true)
const currentPage = ref(1)

// 弹窗引用
const popupRef = ref(null)

// 搜索关键词
const searchKeyword = ref('')

// 是否可以对比
const canCompare = computed(() => selectedDishA.value && selectedDishB.value)

// 对比结果数据 - 只保留热量对比
const comparisonData = computed(() => {
  if (!canCompare.value) return null
  const dishA = selectedDishA.value
  const dishB = selectedDishB.value
  return {
    calorie: {
      a: dishA.calorie || 0,
      b: dishB.calorie || 0,
      diff: (dishA.calorie || 0) - (dishB.calorie || 0),
      winner: (dishA.calorie || 0) < (dishB.calorie || 0) ? 'A' : 'B'
    }
  }
})

// 加载菜品数据
const loadDishes = async () => {
  if (loading.value) return
  loading.value = true
  try {
    const res = await searchDishAPI(searchKeyword.value)
    if (res.code === 1 && res.data) {
      dishData.value = (res.data.records || []).map(dish => ({
        id: dish.id,
        name: dish.dishName || '未知菜品',
        image: dish.image || '/static/images/default-dish.png',
        location: dish.location || '未知位置',
        shop: dish.merchant || '未知商家',
        calorie: dish.calorie || 0,
        price: dish.price || 0,
        rating: dish.dishRating || 0
      }))
    } else {
      uni.showToast({
        title: res.msg || '加载失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载菜品错误:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 选择菜品 - 使用ref主动调用弹窗
const selectDish = (position) => {
  selectingFor.value = position
  searchKeyword.value = ''
  dishData.value = []
  hasMore.value = true
  currentPage.value = 1
  
  // 确保DOM更新后再显示弹窗
  setTimeout(() => {
    showDishSelector.value = true
    // 主动调用弹窗显示方法
    if (popupRef.value) {
      popupRef.value.open()
    }
  }, 0)
}

// 确认选择菜品
const confirmSelectDish = (dish) => {
  if (selectingFor.value === 'A') {
    selectedDishA.value = dish
  } else {
    selectedDishB.value = dish
  }
  showDishSelector.value = false
  if (popupRef.value) {
    popupRef.value.close()
  }
  uni.showToast({
    title: `已选择 ${dish.name}`,
    icon: 'success'
  })
}

// 清除选择
const clearSelection = (position) => {
  if (position === 'A') {
    selectedDishA.value = null
  } else {
    selectedDishB.value = null
  }
}

// 交换选择
const swapSelections = () => {
  const temp = selectedDishA.value
  selectedDishA.value = selectedDishB.value
  selectedDishB.value = temp
  uni.showToast({
    title: '已交换对比菜品',
    icon: 'success'
  })
}

// 关闭弹窗
const closeDishSelector = () => {
  showDishSelector.value = false
  if (popupRef.value) {
    popupRef.value.close()
  }
}

// 热量颜色 - 根据热量高低显示不同颜色
const getCalorieColor = (value) => {
  if (value > 400) return '#f56c6c' // 高热量 - 红色
  if (value > 300) return '#e6a23c' // 中高热量 - 橙色
  return '#67c23a' // 低热量 - 绿色
}
</script>

<template>
  <view class="heatvs-container">
    <!-- 页面标题 -->
    <view class="header-section">
      <view class="title-content">
        <text class="title">
          <text class="iconfont icon-reliang"></text>
          菜品热量对比
        </text>
        <text class="subtitle">对比菜品热量差异，助你做出选择</text>
      </view>
    </view>

    <!-- 主对比区域 -->
    <view class="comparison-area">
      <!-- 左区域 - 菜品A -->
      <view class="dish-section dish-a">
        <view class="section-header">
          <text class="section-title">菜品 A</text>
          <view class="section-actions">
            <view class="select-btn" @tap="selectDish('A')">
              <text class="btn-text">{{ selectedDishA ? '重新选择' : '选择菜品' }}</text>
            </view>
            <view v-if="selectedDishA" class="clear-btn" @tap="clearSelection('A')">
              <text class="btn-text">清除</text>
            </view>
          </view>
        </view>

        <view v-if="selectedDishA" class="dish-card">
          <!-- 菜品A内容保持不变 -->
          <view class="dish-image">
            <image 
              :src="selectedDishA.image" 
              mode="aspectFill" 
              class="dish-img"
            />
          </view>
          <view class="dish-info">
            <text class="dish-name">{{ selectedDishA.name }}</text>
            <view class="dish-details">
              <text class="detail-item">
                <text class="iconfont icon-weizhi"></text>
                {{ selectedDishA.location }}
              </text>
              <text class="detail-item">
                <text class="iconfont icon-shangpu"></text>
                {{ selectedDishA.shop }}
              </text>
              <text class="detail-item">
                ¥{{ selectedDishA.price }}
              </text>
            </view>
            <view class="dish-stats">
              <view class="stat-item calorie">
                <text class="iconfont icon-reliang"></text>
                <text class="stat-label">热量</text>
                <text 
                  class="stat-value"
                  :style="{ color: getCalorieColor(selectedDishA.calorie) }"
                >
                  {{ selectedDishA.calorie }} 千卡
                </text>
              </view>
              <view class="stat-item rating">
                <text class="iconfont icon-icon"></text>
                <text class="stat-label">评分</text>
                <text class="stat-value">{{ selectedDishA.rating.toFixed(1) }}</text>
              </view>
            </view>
          </view>
        </view>

        <view v-else class="empty-selection">
          <view class="empty-icon">
            <text class="iconfont icon-caipin"></text>
          </view>
          <text class="empty-text">点击选择第一个菜品</text>
        </view>
      </view>

      <!-- 中间分割线和VS标识 -->
      <view class="vs-divider">
        <view class="vs-line"></view>
        <view class="vs-badge">
          <text>VS</text>
        </view>
      </view>

      <!-- 下区域 - 菜品B -->
      <view class="dish-section dish-b">
        <!-- 菜品B内容保持不变 -->
        <view class="section-header">
          <text class="section-title">菜品 B</text>
          <view class="section-actions">
            <view class="select-btn" @tap="selectDish('B')">
              <text class="btn-text">{{ selectedDishB ? '重新选择' : '选择菜品' }}</text>
            </view>
            <view v-if="selectedDishB" class="clear-btn" @tap="clearSelection('B')">
              <text class="btn-text">清除</text>
            </view>
          </view>
        </view>

        <view v-if="selectedDishB" class="dish-card">
          <view class="dish-image">
            <image 
              :src="selectedDishB.image" 
              mode="aspectFill" 
              class="dish-img"
            />
          </view>
          <view class="dish-info">
            <text class="dish-name">{{ selectedDishB.name }}</text>
            <view class="dish-details">
              <text class="detail-item">
                <text class="iconfont icon-weizhi"></text>
                {{ selectedDishB.location }}
              </text>
              <text class="detail-item">
                <text class="iconfont icon-shangpu"></text>
                {{ selectedDishB.shop }}
              </text>
              <text class="detail-item">
                ¥{{ selectedDishB.price }}
              </text>
            </view>
            <view class="dish-stats">
              <view class="stat-item calorie">
                <text class="iconfont icon-reliang"></text>
                <text class="stat-label">热量</text>
                <text 
                  class="stat-value"
                  :style="{ color: getCalorieColor(selectedDishB.calorie) }"
                >
                  {{ selectedDishB.calorie }} 千卡
                </text>
              </view>
              <view class="stat-item rating">
                <text class="iconfont icon-icon"></text>
                <text class="stat-label">评分</text>
                <text class="stat-value">{{ selectedDishB.rating.toFixed(1) }}</text>
              </view>
            </view>
          </view>
        </view>

        <view v-else class="empty-selection">
          <view class="empty-icon">
            <text class="iconfont icon-caipin"></text>
          </view>
          <text class="empty-text">点击选择第二个菜品</text>
        </view>
      </view>
    </view>

    <!-- 对比结果区域 -->
    <view v-if="canCompare" class="comparison-results">
      <!-- 对比结果内容保持不变 -->
      <view class="results-header">
        <text class="results-title">
          对比结果
        </text>
      </view>

      <view class="comparison-grid">
        <view class="comparison-item main">
          <view class="item-header">
            <text class="iconfont icon-reliang"></text>
            <text>热量对比 (千卡)</text>
          </view>
          <view class="item-values">
            <view 
              class="value-item"
              :class="{ winner: comparisonData.calorie.winner === 'A' }"
            >
              <text 
                class="value"
                :style="{ color: getCalorieColor(comparisonData.calorie.a) }"
              >
                {{ comparisonData.calorie.a }}
              </text>
              <text class="label">{{ selectedDishA.name }}</text>
            </view>
            <view class="diff-indicator">
              <text 
                v-if="comparisonData.calorie.diff > 0"
                class="diff-text higher"
              >
                +{{ Math.abs(comparisonData.calorie.diff) }}
              </text>
              <text 
                v-else-if="comparisonData.calorie.diff < 0"
                class="diff-text lower"
              >
                -{{ Math.abs(comparisonData.calorie.diff) }}
              </text>
              <text v-else class="diff-text equal">相等</text>
            </view>
            <view 
              class="value-item"
              :class="{ winner: comparisonData.calorie.winner === 'B' }"
            >
              <text 
                class="value"
                :style="{ color: getCalorieColor(comparisonData.calorie.b) }"
              >
                {{ comparisonData.calorie.b }}
              </text>
              <text class="label">{{ selectedDishB.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 菜品选择弹窗 - 修改了绑定方式和引用 -->
    <uni-popup 
      ref="popupRef" 
      v-model="showDishSelector" 
      type="bottom"
      :mask="true"
    >
      <view class="dish-selector" style="height: 80vh;">
        <view class="selector-header">
          <text class="selector-title">选择菜品 {{ selectingFor }}</text>
          <view class="close-btn" @tap="closeDishSelector">
            <text class="iconfont icon-arrow"></text>
          </view>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-section">
          <view class="search-box">
            <text class="iconfont icon-sousuo search-icon"></text>
            <input
              v-model="searchKeyword"
              placeholder="搜索菜品名称、位置..."
              class="search-input"
              @confirm="loadDishes()"
            />
          </view>
        </view>

        <!-- 菜品列表 -->
        <scroll-view 
          class="dishes-grid" 
          scroll-y="true"
          style="height: calc(100% - 200rpx);"
        >
          <view 
            v-for="dish in dishData"
            :key="dish.id"
            class="dish-option"
            @tap="confirmSelectDish(dish)"
          >
            <view class="dish-image">
              <image 
                :src="dish.image" 
                mode="aspectFill" 
                class="dish-img"
              />
            </view>
            <view class="dish-info">
              <text class="dish-name">{{ dish.name }}</text>
              <text class="dish-location">{{ dish.location }} · {{ dish.shop }}</text>
              <view class="dish-nutrition">
                <text 
                  class="calorie"
                  :style="{ color: getCalorieColor(dish.calorie) }"
                >
                  {{ dish.calorie }}千卡
                </text>
                <text class="price">¥{{ dish.price }}</text>
                <text class="rating">
                  <text class="iconfont icon-pingfen"></text>
                  {{ dish.rating.toFixed(1) }}
                </text>
              </view>
            </view>
          </view>
        </scroll-view>

        <!-- 空状态 -->
        <view v-if="dishData.length === 0 && !loading" class="empty-search">
          <text class="empty-text">没有找到相关菜品</text>
        </view>

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-section">
          <text>加载中...</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.heatvs-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40rpx 32rpx calc(40rpx + env(safe-area-inset-bottom)) 32rpx;
}

// 页面标题
.header-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40rpx);
  border-radius: 40rpx;
  padding: 48rpx 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
  }

  .title-content {
    .title {
      font-size: 44rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 48rpx;
        color: #667eea;
        margin-right: 20rpx;
      }
    }

    .subtitle {
      font-size: 28rpx;
      color: #666;
      opacity: 0.8;
    }
  }

  .action-buttons {
    .swap-btn {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(45deg, #667eea, #764ba2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);

      .iconfont {
        font-size: 32rpx;
        color: white;
      }

      &:active {
        transform: translateY(4rpx);
        box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
      }
    }
  }
}

// 主对比区域
.comparison-area {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40rpx;
  margin-bottom: 60rpx;
  min-height: 700rpx;

  .dish-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40rpx);
    border-radius: 40rpx;
    padding: 40rpx;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
    border: 2rpx solid rgba(255, 255, 255, 0.2);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;

      .section-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }

      .section-actions {
        display: flex;
        gap: 16rpx;

        .select-btn, .clear-btn {
          padding: 16rpx 24rpx;
          border-radius: 24rpx;
          font-size: 24rpx;

          .btn-text {
            font-size: 24rpx;
            font-weight: 500;
          }

          &:active {
            transform: translateY(2rpx);
          }
        }

        .select-btn {
          background: linear-gradient(45deg, #667eea, #764ba2);
          color: white;
          box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.3);

          .btn-text {
            color: white;
          }
        }

        .clear-btn {
          background: rgba(245, 108, 108, 0.1);
          border: 2rpx solid rgba(245, 108, 108, 0.3);

          .btn-text {
            color: #f56c6c;
          }
        }
      }
    }

    .dish-card {
      .dish-image {
        width: 100%;
        height: 240rpx;
        border-radius: 24rpx;
        overflow: hidden;
        margin-bottom: 32rpx;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

        .dish-img {
          width: 100%;
          height: 100%;
        }
      }

      .dish-info {
        .dish-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          display: block;
          margin-bottom: 24rpx;
        }

        .dish-details {
          margin-bottom: 24rpx;

          .detail-item {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
            display: flex;
            align-items: center;

            .iconfont {
              font-size: 24rpx;
              color: #999;
              margin-right: 12rpx;
            }
          }
        }

        .dish-stats {
          display: flex;
          gap: 20rpx;
          margin-bottom: 24rpx;

          .stat-item {
            flex: 1;
            padding: 16rpx;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 16rpx;
            text-align: center;

            .iconfont {
              font-size: 28rpx;
              color: #667eea;
              margin-bottom: 8rpx;
              display: block;
            }

            .stat-label {
              font-size: 24rpx;
              color: #666;
              margin-bottom: 8rpx;
              display: block;
            }

            .stat-value {
              font-size: 28rpx;
              font-weight: 600;
            }

            &.calorie .stat-value {
              font-size: 32rpx;
            }
          }
        }
      }
    }

    .empty-selection {
      height: 560rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #999;

      .empty-icon {
        margin-bottom: 32rpx;

        .iconfont {
          font-size: 96rpx;
          color: #ddd;
        }
      }

      .empty-text {
        font-size: 28rpx;
      }
    }
  }

  .vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 160rpx;

    .vs-line {
      position: absolute;
      width: 4rpx;
      height: 100%;
      background: linear-gradient(45deg, #667eea, #764ba2);
      transform: rotate(45deg);
      box-shadow: 0 0 40rpx rgba(102, 126, 234, 0.3);
    }

    .vs-badge {
      width: 100rpx;
      height: 100rpx;
      background: linear-gradient(45deg, #667eea, #764ba2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 32rpx;
      box-shadow: 0 16rpx 48rpx rgba(102, 126, 234, 0.3);
      z-index: 2;
      position: relative;
    }
  }
}

// 对比结果
.comparison-results {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40rpx);
  border-radius: 40rpx;
  padding: 48rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.2);

  .results-header {
    margin-bottom: 48rpx;

    .results-title {
      font-size: 40rpx;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 44rpx;
        color: #667eea;
        margin-right: 20rpx;
      }
    }
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(560rpx, 1fr));
    gap: 40rpx;
    margin-bottom: 60rpx;

    .comparison-item {
      background: rgba(102, 126, 234, 0.05);
      border-radius: 32rpx;
      padding: 40rpx;
      border: 4rpx solid rgba(102, 126, 234, 0.1);

      &.main {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(102, 126, 234, 0.03));
        border-color: rgba(102, 126, 234, 0.2);
      }

      .item-header {
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        font-weight: 600;
        color: #333;
        font-size: 28rpx;

        .iconfont {
          font-size: 36rpx;
          color: #667eea;
          margin-right: 16rpx;
        }
      }

      .item-values {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 24rpx;
        align-items: center;

        .value-item {
          text-align: center;
          padding: 24rpx;
          border-radius: 24rpx;
          background: rgba(255, 255, 255, 0.8);
          transition: all 0.3s ease;

          &.winner {
            background: linear-gradient(
              45deg,
              rgba(103, 194, 58, 0.1),
              rgba(103, 194, 58, 0.05)
            );
            border: 4rpx solid rgba(103, 194, 58, 0.3);
            transform: scale(1.05);
          }

          .value {
            display: block;
            font-size: 40rpx;
            font-weight: 700;
            margin-bottom: 8rpx;
          }

          .label {
            font-size: 24rpx;
            color: #666;
            display: block;
          }
        }

        .diff-indicator {
          text-align: center;

          .diff-text {
            font-size: 24rpx;
            font-weight: 600;
            padding: 8rpx 16rpx;
            border-radius: 16rpx;

            &.higher {
              color: #f56c6c;
              background: rgba(245, 108, 108, 0.1);
            }

            &.lower {
              color: #67c23a;
              background: rgba(103, 194, 58, 0.1);
            }

            &.equal {
              color: #909399;
              background: rgba(144, 147, 153, 0.1);
            }
          }
        }
      }
    }
  }
}

// 菜品选择器
.dish-selector {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 40rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .selector-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 50%;

      .iconfont {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .search-section {
    padding: 32rpx 40rpx;

    .search-box {
      display: flex;
      align-items: center;
      background: #f8f9fa;
      border-radius: 24rpx;
      padding: 16rpx 24rpx;

      .search-icon {
        font-size: 32rpx;
        color: #999;
        margin-right: 16rpx;
      }

      .search-input {
        flex: 1;
        font-size: 28rpx;
        border: none;
        background: transparent;
      }
    }
  }

  .dishes-grid {
    flex: 1;
    padding: 0 24rpx 24rpx;
    height: 0;
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .dish-option {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(102,126,234,0.06);
      border: 1rpx solid #f0f0f0;
      padding: 16rpx 20rpx;
      gap: 16rpx;
      min-height: 100rpx;
      transition: box-shadow 0.2s;
      overflow: hidden;
      width: 100% !important;
      max-width: 100% !important;
      flex-shrink: 1;
      overflow-x: hidden;
      box-sizing: border-box;
      &:active {
        box-shadow: 0 8rpx 24rpx rgba(102,126,234,0.12);
      }

      .dish-image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 12rpx;
        overflow: hidden;
        flex-shrink: 0;
        .dish-img {
          width: 100%;
          height: 100%;
        }
      }

      .dish-info {
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4rpx;
        overflow: hidden;
        .dish-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          line-height: 1.2;
          margin-bottom: 2rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100% !important;
        }
        .dish-location {
          font-size: 22rpx;
          color: #888;
          line-height: 1.1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100% !important;
        }
        .dish-nutrition {
          display: flex;
          align-items: center;
          gap: 12rpx;
          margin-top: 2rpx;
          flex-wrap: nowrap;
          .calorie, .price, .rating {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100% !important;
          }
          .calorie {
            font-size: 24rpx;
            font-weight: 600;
          }
          .price {
            font-size: 22rpx;
            color: #67c23a;
            font-weight: 500;
          }
          .rating {
            font-size: 22rpx;
            color: #e6a23c;
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 22rpx;
              margin-right: 2rpx;
            }
          }
        }
      }
    }
  }

  .empty-search {
    text-align: center;
    padding: 120rpx 40rpx;
    color: #999;

    .empty-icon {
      margin-bottom: 32rpx;

      .iconfont {
        font-size: 96rpx;
        color: #ddd;
      }
    }

    .empty-text {
      font-size: 28rpx;
    }
  }

  .loading-section {
    padding: 40rpx;
  }
}

// 动画
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// 响应式
@media (max-width: 768px) {
  .heatvs-container {
    padding: 32rpx 24rpx calc(40rpx + env(safe-area-inset-bottom)) 24rpx;
  }

  .header-section {
    flex-direction: column;
    gap: 32rpx;
    text-align: center;
    padding: 40rpx 32rpx;
  }

  .comparison-area {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 32rpx;

    .vs-divider {
      width: 100%;
      height: 120rpx;

      .vs-line {
        width: 100%;
        height: 4rpx;
        transform: rotate(0deg);
      }
    }
  }

  .comparison-results {
    padding: 40rpx 32rpx;

    .comparison-grid {
      grid-template-columns: 1fr;
      gap: 32rpx;
    }
  }
}
</style>
